<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
        *{
            padding:0;
            margin: 0;
        }
        #textClipper{
            display: inline-block;
            font-size: 12px;
            font-family: "微软雅黑","Tahoma";
            white-space: normal;
            color: #8f8f8f;
            word-wrap: normal;
            word-break: normal;
        }
        .menuTrigger{
            padding: 3px;

        }
        .attach_icon{
            width: 17px;
            height: 16px;
            display: inline-block;
            background: url("../../style/img/attachicon.png");
            vertical-align: middle;
            margin-left: 3px;
        }
        /*max-width总比contact-value的max-value多10px才能两边最大长度保持一致*/
        #textClipper span{
            vertical-align: middle;
            display: block;
            float: left;
            max-width: 310px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .split-text {
            margin: 3px 10px 3px 3px;
        }
        .fontsize10 {
            font-size: 10px;
        }
    </style>
</head>
<body>
    <div id="textClipper">
    </div>
    <script type="text/javascript">
    var fEscape = function(sVal) {
        sVal = sVal.replace(/</g, "&lt");
        sVal = sVal.replace(/>/g, "&gt");
        return sVal;
    };
    var fCreateElement = function(sElement) {
        try{
            return document.createElement(sElement);
        }catch(e){
            var oo = document.createElement("div");
            oo.innerHTML = sElement;
            return oo.childNodes[0];
        }
    };

    var fCheckIfHasAttach = function(oData) {
        if (oData.hasWmsvrAttachment) return true;
        else {
            return oData.attachment.some(function(oItem) {
                if (!oItem.cid) return true;
            });
        }
    };

    /* 检查text是否超出iMaxWidth
     * win7/win8下 12px的字体高是22
     * xp下 12px的字体高23
     * 换行判断标准设为25来兼容细微的行高差
     */
    var fCheckIfOverflow = function($checkContainer, iMaxWidth) {
        iContainerCurrWidth = $checkContainer.clientWidth;
        iContainerCurrHeight = $checkContainer.clientHeight;

        if (iContainerCurrWidth > iMaxWidth
            || iContainerCurrHeight > 25) return true;
        else return false;
    };

    var Agent = {};
    Agent.clipHeader = function(oData, iMaxWidth) {
        var bHasAttach;
        oData.attachment && (bHasAttach = fCheckIfHasAttach(oData));

        /*
         * @bIfPartNeedClip part是否需要截断
        */
        var fRenderPart = function(aData, sText) {
            var iPartLen = aData.length
              , bIfPartNeedClip = false
              , iPartClipedCount = 0;

            $textContainer.innerHTML += "<span class='split-text'>"+ sText +"</span>";
            if (fCheckIfOverflow($textContainer, iMaxWidth)) {
                $textContainer.removeChild($textContainer.lastChild);
                return {
                    needClip: true
                  , clipedCount: iPartClipedCount
                }
            }

            aData.some(function(oItem, iIndex) {
                sToValue = fEscape(oItem.name ? oItem.name : oItem.mail);

                if (iIndex == iPartLen - 1) {
                    var $span = fCreateElement("<span class='m menuTrigger last'></span>");

                    $span.innerText = sToValue;
                } else {
                    var $span = fCreateElement("<span class='m menuTrigger'></span>")
                      , $ss = fCreateElement("<ss class = 'fontsize10'>、</ss>");

                    $span.innerText = sToValue;
                    $span.appendChild($ss);
                }
                $textContainer.appendChild($span);

                if (fCheckIfOverflow($textContainer, iMaxWidth)) {
                    $textContainer.removeChild($textContainer.lastChild);
                    // 如果是第1个就溢出了 则相应的split-text也要删除
                    if (iIndex == 0)
                        $textContainer.removeChild($textContainer.lastChild);
                    bIfPartNeedClip = true;
                    iPartClipedCount = iIndex;
                    return true;
                }
            });

            return {
                needClip: bIfPartNeedClip
              , clipedCount: iPartClipedCount
            }
        };


        var $textContainer = document.getElementById("textClipper");

        var iToLen = 0
          , iCCLen = 0
          , iBccLen = 0
          , iSumLen = 0
          , bHasTo = false
          , bHasCC = false
          , bHasBcc = false;

        oData.to && (iToLen = oData.to.length);
        oData.cc && (iCCLen = oData.cc.length);
        oData.bcc && (iBccLen = oData.bcc.length);

        iToLen && (bHasTo = true);
        iCCLen && (bHasCC = true);
        iBccLen && (bHasBcc = true);
        iSumLen = iToLen + iCCLen + iBccLen;



        // 发件人 返回false表示 溢出
        var fTryAddFrom = function() {
            var sFromValue = fEscape(
                            oData.from.name
                            ? oData.from.name
                            : oData.from.mail
                         );
            $textContainer.innerHTML = "";
            if (bHasAttach) {
                $textContainer.innerHTML = "<span class='icon attach_icon'></span>";
                if (fCheckIfOverflow($textContainer, iMaxWidth)) return false
            }

            var $span = fCreateElement("<span class='menuTrigger mail-from m'></span>");

            $span.innerText = sFromValue;
            $textContainer.appendChild($span);

            if (fCheckIfOverflow($textContainer, iMaxWidth)) return false
            else return true;
        };

        if (!fTryAddFrom()) return {};
        /*
         * @iContainedCount 可容纳的数量 从第一个到第iClipedCount(包含)个
         */
        var oPartResult = {}
          , iContainedCount = 0
          , iClipedCount = iContainedCount;

        var fDoPart = function(aRenderData, sSplitText) {
            oPartResult = fRenderPart(aRenderData, sSplitText);
            if (!oPartResult.needClip) {
                iContainedCount += aRenderData.length;
            } else {
                iContainedCount += oPartResult.clipedCount;
            }
            return oPartResult;
        };

        // 尝试添加to、 cc、bcc
        bHasTo && fDoPart(oData.to, "发至");
        if (bHasCC && !oPartResult.needClip) fDoPart(oData.cc, "抄送");
        if (bHasBcc && !oPartResult.needClip) fDoPart(oData.bcc, "密送");

        // 添加"还有...位"
        if (oPartResult.needClip) {
            iClipedCount = iContainedCount;
            $textContainer.innerHTML
            += "<span>还有<a id='num'>"+ (iSumLen - iContainedCount) +"</a>位...</span>";
        } else return oPartResult;


        /* "还有...位"溢出时 不断尝试删除前一个child来使不溢出
         *
         *
         */
        var fFix = function() {
            if (fCheckIfOverflow($textContainer, iMaxWidth)) {
                var $m = document.getElementsByClassName("m");
                if ($m.length > 0) $textContainer.removeChild($m[$m.length - 1]);

                iContainedCount > 0 && iContainedCount--;
                iClipedCount > 0 && iClipedCount--;
                document.getElementById("num").innerText = iSumLen - iContainedCount;

                // 检查被移除的child的前一个元素是不是split-text,若是 则移除；
                var $prev = $textContainer.lastChild.previousElementSibling;
                if ($prev && $prev.className.indexOf("split-text") > -1)
                    $textContainer.removeChild($prev);
                // 只剩下一个attach_ico 和 还有...位（但是还有几位放不下换行了）
                else if ($prev && $prev.className.indexOf("attach_icon") > -1) {
                    // 若一个都放不下则显示全部数据
                    oPartResult = {}
                    $textContainer.removeChild($prev);
                    return;
                } else if (!$prev) {
                    //只剩下"还有...位"
                    oPartResult = {};
                    return;
                }
            }

            if (fCheckIfOverflow($textContainer, iMaxWidth)) fFix();
            else return;
        };

        fFix();

        // 裁剪整理返回需要显示的to cc bcc
        var fClipData = function() {
            var oResultData = Object.assign({}, oData);

            if (bHasTo && iClipedCount >= iToLen ) {
                oResultData.to = oResultData.to.slice(0, iToLen);
            } else if (bHasTo && iClipedCount < iToLen) {
                oResultData.to = oResultData.to.slice(0, iClipedCount);
                oResultData.cc = null;
                oResultData.bcc = null;
                return oResultData;
            }

            if (bHasCC && iClipedCount >= iToLen + iCCLen) {
                oResultData.cc = oResultData.cc.slice(0, iCCLen);
            } else if (bHasCC && iClipedCount < iToLen + iCCLen) {
                oResultData.cc = oResultData.cc.slice(0, iClipedCount - iToLen);
                oResultData.bcc = null;
                return oResultData;
            }

            if (bHasBcc && iClipedCount >= iToLen + iCCLen + iBccLen) {
                oResultData.bcc = oResultData.bcc.slice(0, iBccLen);
            } else if (bHasBcc && iClipedCount < iToLen + iCCLen + iBccLen) {
                oResultData.bcc = oResultData.bcc.slice(0, iClipedCount- iToLen - iCCLen);
                return oResultData;
            }
        };


        //需要剪裁  剪裁数据并返回
        if (oPartResult.needClip) {
            var oResultData = fClipData();
            oResultData.needClip = oPartResult.needClip;
            oResultData.remainCount = iSumLen - iContainedCount;

            return {
                clipedData: oResultData,
                needClip: oPartResult.needClip
            }
        } else {
            return {
                needClip: false
            }
        }
    };

    Agent.layoutHeader = function(oData, iMaxWidth) {
        var $container = document.getElementById("textClipper");
        $container.innerHTML = "";

        // 是否需要attach icon
        var bHasAttach;
        oData.attachment && (bHasAttach = fCheckIfHasAttach(oData));
        bHasAttach
        && ($container.innerHTML = "<span class='icon attach_icon'></span>");

        if (fCheckIfOverflow($container, iMaxWidth)) return;

        var iToLen = 0
          , iCCLen = 0
          , iBccLen = 0
          , bHasTo = false
          , bHasCC = false
          , bHasBcc = false;

        oData.to && (iToLen = oData.to.length);
        oData.cc && (iCCLen = oData.cc.length);
        oData.bcc && (iBccLen = oData.bcc.length);

        iToLen && (bHasTo = true);
        iCCLen && (bHasCC = true);
        iBccLen && (bHasBcc = true);

        var aCombine = []
          , aCombine_copy = []
          , aNewTo = []
          , aNewCC = []
          , aNewBcc = []
          , aFrom = [oData.from];

        bHasTo && (aNewTo = ["发至"].concat(oData.to));
        bHasCC && (aNewCC = ["抄送"].concat(oData.cc));
        bHasBcc && (aNewBcc = ["密送"].concat(oData.bcc));
        aCombine = aFrom.concat(aNewTo, aNewCC, aNewBcc);
        aCombine_copy = aCombine.slice(0);

        /* @ fLayoutOneLine 尝试在一行里加入数据
         * @ aReslut为这一行布局能容纳下的数据的集合
         * @ bDoClean 除了第一次（有attach icon）执行fLayoutOneLine外
         *            都要清除$container
         */
        var fLayoutOneLine = function(aData, bDoClean) {
            if (bDoClean) $container.innerHTML = "";
            var aResult = [];
            var iLen = aData.length;

            // 尝试逐一加入联系人至溢出
            aData.some(function(item, iIndex) {
                var sValue = ''
                  , sHtml = ''
                  , sType = typeof item;

                if (sType == "string") {
                    var $span = fCreateElement("<span class='split-text'>"+ item +"</span>");
                } else if (sType == "object") {
                    sValue = fEscape(item.name ? item.name : item.mail);
                    var $span = fCreateElement("<span class='m menuTrigger'></span>");

                    if (iIndex == iLen - 1) {
                        $span.innerText = sValue;
                    }
                    else {
                        var $ss = fCreateElement("<ss class = 'fontsize10'>、</ss>");
                        $span.innerText = sValue;
                        $span.appendChild($ss);
                    }
                }

                $container.appendChild($span);

                if (fCheckIfOverflow($container, iMaxWidth)) {
                    $container.removeChild($container.lastChild);
                    /* 如果是第1个联系人（除发件人外）就溢出了
                     * 则相应的split-text也要换到下一行
                     */
                    if (typeof aData[iIndex - 1] == "string") {
                        var $lastChild = $container.lastChild;
                        if ($lastChild.className.indexOf("attach_icon") < 0) {
                            $container.removeChild($lastChild);
                            aResult.splice(iIndex - 1, 1);
                        }
                    }
                    return true;
                } else {
                    aResult[iIndex] = item;
                }
            });
            // 从aData截去aResult， 剩余再做新一轮的循环
            aData.splice(0, aResult.length);
            return aResult;
        };

        var fLayout = function(aData, bDoClean) {
            var aResult = fLayoutOneLine(aData, bDoClean);
            aLayoutResult.push(aResult);
            if (aCombine.length > 0 && aResult.length > 0) return fLayout(aData, true);
            // iMaxWidth太小 无法完成规定布局
            else if (aCombine.length > 0 && aResult.length == 0) return false;
            // 规定布局完成
            else if (aCombine.length == 0) return true;
        };

        var aLayoutResult = [];

        // iMaxWidth太小 无法完成规定布局 采用普通布局
        if (!fLayout(aCombine, false)) {
            aLayoutResult = [];
            aLayoutResult.push(aCombine_copy);
        }

        return aLayoutResult;
    }
    </script>
	 <script type="text/javascript">
	//加载事件
window.onload=function(){
 var bcd=document.body.innerHTML;//JS方式
  document.getElementById("showlast2").innerText=bcd.toString();
 //alert(bcd.toString());
   
};
</script>
<p id="showlast2">324</p>
</body>
</html>